{% extends "base.html" %}
{% load staticfiles %}

{% block page_content %}
<section class="content-header" style="padding-top:0px" xmlns="http://www.w3.org/1999/html">
<div class="row">
    <div class="box box-info">
        <div class="box-header">
            <h4> <span style="font-weight:bold">{{ object.name }}</span>: Currently showing frames and associated annotations & detections for frame index <span style="font-weight:bold">{{ offset }}</span> to <span style="font-weight:bold">{{ limit }}</span>.</h4>
            <div class="col-lg-12 m-t">
                <table class="table table-bordered">
                <thead>
                <tr>
                    <th class="text-center">type</th>
                    <th class="text-center">name</th>
                    <th class="text-center">duration</th>
                    <th class="text-center">frames</th>
                    <th class="text-center">segments</th>
                    <th class="text-center">regions</th>
                    <th class="text-center">labels</th>
                    <th class="text-center">height</th>
                    <th class="text-center">width</th>
                    <th class="text-center">created</th>
                    <th class="text-center">youtube</th>

                </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{%  if object.dataset and object.query %} Query {% elif object.dataset %} Dataset {% else %}Video {% endif %}</td>
                        <td>{{ object.name }} </td>
                        <td class="text-right">{{ object.length_in_seconds }} </td>
                        <td class="text-right">{{ object.frames }} </td>
                        <td class="text-right">{{ object.segments }} </td>
                        <td class="text-right">{{ region_count }} </td>
                        <td class="text-right">{{ label_count }} </td>
                        <td class="text-right">{{ object.height }} </td>
                        <td class="text-right">{{ object.width }} </td>
                        <td class="text-center">{{ object.created }}</td>
                        <td class="text-center">{% if object.youtube_video %}<a href="{{ object.url }}" target="_blank">youtube link</a>{% endif %}</td>
                    </tr>
                </tbody>
                </table>
        </div>
        </div>
        </div>
    </div>
</section>
<section class="content">
<div class="row">
    <div class="col-lg-6">
        {% if not video.dataset %}
        <div class="box">
        <div class="box-header with-border" >
            <h3>Video</h3>
            {%  if object.youtube_video %}<a href="{{ object.url }}" target="_blank">{{ object.url }}</a>{% endif %}
        </div>
        <div class="box-body" style="text-align:center">
            <video controls="" preload="metadata" name="media" style="width:90%;margin-left:auto;margin-right:auto">
            <source src="{{url}}" type="video/mp4">
            </video>
        </div>
        </div>
        {% endif %}
        {% if frame_index_offsets %}
        <div class="box box-warning">
        <div class="box-header with-border">
        <h4>The video / dataset has max frame_index {{ max_frame_index }} > 1000 please select range </h4>
        </div>
        <div class="box-body">
            <table class="table dataTables">
            <thead>
            <tr>
                    <th class="text-center">frame index range</th>
                    <th class="text-center">view</th>
            </tr>
            </thead>
            <tbody>
            {% for offset in frame_index_offsets %}
                <tr>
                    <td class="text-center">{{ offset.0 }} to {{ offset.1 }}</td>
                    <td class="text-center"><a href=".?frame_index_offset={{ offset.0 }}">view range</a></td>
                </tr>
            {% endfor %}
            </tbody>
            </table>
        </div>
        </div>
        {%  endif %}
    </div>

<div class="col-lg-6">
    <div class="box " >
        <div class="box-header with-border"><h3 style="display: inline-block">Task status</h3>
        <a class="btn btn-primary pull-right" href="{% url 'video_tasks' object.pk %}" style="margin: 10px auto" > <i class="fa fa-list"></i> All tasks</a>
        </div>
        <div class="box-body">
            <div class="row text-center">
                    <div class="col-xs-3">
                        <a class="btn btn-warning btn-block" href="{% url 'video_tasks_status' object.pk 'pending' %}" style="margin: 10px auto" > <i class="fa fa-clock-o"></i> {{ pending_tasks }} pending</a>
                    </div>
                    <div class="col-xs-3">
                        <a class="btn btn-primary btn-block" href="{% url 'video_tasks_status' object.pk 'running' %}" style="margin: 10px auto" > <i class="fa fa-gears"></i> {{ running_tasks }} running</a>
                    </div>
                    <div class="col-xs-3">
                        <a class="btn btn-success btn-block" href="{% url 'video_tasks_status' object.pk 'successful' %}" style="margin: 10px auto" > <i class="fa fa-check"></i> {{ successful_tasks }} done</a>
                    </div>
                    <div class="col-xs-3">
                        <a class="btn btn-danger btn-block" href="{% url 'video_tasks_status' object.pk 'failed' %}" style="margin: 10px auto" > <i class="fa fa-close"></i> {{ errored_tasks }} failed</a>
                    </div>
            </div>
        </div>
    </div>
    <div class="box ">
        <div class="box-header with-border"><h3>Admin actions</h3></div>
        <div class="box-body">
            <div class="row">
                <div class="col-sm-3 text-center">
                    <form action="/export_video" method="post"><input type="hidden" value="{{ object.pk }}" name="video_id"><input type="hidden" value="file" name="export_method">{% csrf_token %}
                        <button type="submit" class="btn btn-info btn-block"><i class="fa fa-download"></i> Export as a file</button>
                    </form>
                </div>
                <div class="col-sm-3 text-center">
                    <form action="/delete_video" method="post"><input type="hidden" value="{{ object.pk }}" name="video_id">{% csrf_token %}
                        <button type="submit" class="btn btn-danger btn-block"><i class="fa fa-delete"></i> Delete (only staff)</button>
                    </form>
                </div>
                <div class="col-sm-6">
                    <form action="/rename_video" method="post">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <input name="name" type="text" placeholder="New name for {{ object.name }}" required="required" class="form-control" />
                                </div>
                            </div>
                            <div class="col-sm-6 text-center">
                                <input type="hidden" value="{{ object.pk }}" name="video_id">{% csrf_token %}
                                <button type="submit" class="btn btn-success btn-block"><i class="fa fa-edit"></i> Rename</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <form action="/export_video" method="post">
            <div class="row m-t" style="margin-top:25px">
                <div class="col-sm-3"><div class="form-group"><label for="bucket">S3 Bucket <input name="bucket" type="text" placeholder="bucket" required="required" class="form-control" /></label></div></div>
                <div class="col-sm-3"><div class="form-group"><label for="key">S3 Key <input name="key" type="text" placeholder="key_prefix" required="required" class="form-control" /></label></div></div>
                <div class="col-sm-3"><div class="form-group"><label for="region">Region <input name="region" type="text" placeholder="region" required="required" value="us-east-1" class="form-control" /></label></div></div>
                <div class="col-sm-3">{% csrf_token %}
                    <input type="hidden" value="{{ object.pk }}" name="video_id">
                    <input type="hidden" value="s3" name="export_method">
                    <button type="submit" class="btn btn-block btn-primary" style="margin-top:20px"> <i class="fa fa-cloud-upload"></i> Backup to S3</button>
                </div>
            </div>
            </form>
            <h5 class="text-center">Delete currently requires retrieval workers to be restarted to purge index loaded in memory (a fix is pending)</h5>
            <h5 class="text-center">Provide AWS credential via environment variables or by running aws configure inside container or via IAM roles on EC2</h5>
            {% if exports or s3_exports %}
            <h4 class="text-center">Available backups</h4>
            <table class="table dataTables-nofilter">
                <thead>
                    <tr>
                        <th class="text-center">Created</th>
                        <th class="text-center">Completed</th>
                        <th class="text-center">Download URL or S3 region/bucket/key</th>
                    </tr>
                </thead>
                <tbody>
                {% for e in exports %}
                    <tr>
                        <td>{{ e.started }}</td>
                        <td class="text-center">{{ e.completed }}</td>
                        <td class="text-center">
                            {% if e.arguments.file_name %}
                                <a href="{{ MEDIA_URL }}exports/{{ e.arguments.file_name }}">click to download</a>
                            {% elif e.completed %}
                                s3://{{ e.arguments.bucket }}/{{ e.arugments.key }}
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
                {% for e in s3_exports %}
                    <tr>
                        <td>{{ e.started }}</td>
                        <td class="text-center">{{ e.completed }}</td>
                        <td class="text-center">{{ e.region }} / {{ e.bucket }} / {{ e.key }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {% endif %}
            </div>
        </div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
            <div class="box">
            <div class="box-header with-border">
            <h3>List of frames/images & detection</h3>
            </div>
            <div class="box-body">
                {% if frame_first and frame_last %}
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 text-center" style="height:200px"><a href="/frames/{{ frame_first.pk }}"><img style="height:70%"  src="{{ MEDIA_URL }}{{ object.pk }}/frames/{{ frame_first.frame_index }}.jpg"><h4>Frame {{ frame_first.frame_index }}</h4></a></div>
                    <div class="col-lg-6 col-md-6 col-sm-6 text-center" style="height:200px"><a href="/frames/{{ frame_last.pk }}"><img style="height:70%" src="{{ MEDIA_URL }}{{ object.pk }}/frames/{{ frame_last.frame_index }}.jpg"><h4>Frame {{ frame_last.frame_index }}</h4></a></div>
                </div>
                {% endif %}
                <table class="table dataTables">
                <thead>
                <tr>
                        <th class="text-center">type</th>
                        <th class="text-center">file / annotation / object name</th>
                        <th class="text-center">confidence</th>
                        <th class="text-center">size in pixels</th>
                        <th class="text-center">x</th>
                        <th class="text-center">y</th>
                        <th class="text-center">w</th>
                        <th class="text-center">h</th>
                        {% if not object.dataset %}<th class="text-center">segment</th>{% endif %}
                        <th class="text-center">frame index</th>
                        <th class="text-center">view</th>
                </tr>
                </thead>
                <tbody>
                {% for f in frame_list %}
                    <tr>
                        <td>{% if object.dataset %} image {% else %} video frame {% endif %}</td>
                        <td class="text-left">{% if object.dataset %}  {{ f.name }} {% endif %}</td>
                        <td class="text-right"> 100.0 %</td>
                        <td class="text-right">{% widthratio object.height 1 object.width %}</td>
                        <td class="text-right">{{ 0 }}</td>
                        <td class="text-right">{{ 0 }}</td>
                        <td class="text-right">{{ f.w }}</td>
                        <td class="text-right">{{ f.h }}</td>
                        {% if not object.dataset %}<td class="text-right"><a href="/segments/by_index/{{ object.pk }}/{{ f.segment_index }}">{{ f.segment_index }}</a></td>{% endif %}
                        <td class="text-right">{{ f.frame_index }} </td>
                        <td class="text-center"><a href="/frames/{{ f.pk }}">view</a></td>
                    </tr>
                {% endfor %}
                {% for d in detection_list %}
                    <tr>
                        <td>detection</td>
                        <td class="text-left">{{ d.object_name }} </td>
                        <td class="text-right"> {{ d.confidence|floatformat }} %</td>
                        <td class="text-right">{% widthratio d.h 1 d.w %}</td>
                        <td class="text-right">{{ d.x }}</td>
                        <td class="text-right">{{ d.y }}</td>
                        <td class="text-right">{{ d.w }}</td>
                        <td class="text-right">{{ d.h }}</td>
                        {% if not object.dataset %}<td class="text-right"><a href="/segments/by_index/{{ object.pk }}/{{ d.segment_index }}">{{ d.segment_index }}</a></td>{% endif %}
                        <td class="text-right">{{ d.frame_index }} </td>
                        <td class="text-center"><a href="/frames/{{ d.frame_id }}">view</a></td>
                    </tr>
                {% endfor %}
                {% for d in annotation_list %}
                    <tr>
                        <td>annotation</td>
                        <td class="text-left">{{ d.object_name }}</td>
                        <td class="text-right"> 100 %</td>
                        <td class="text-right">{% widthratio d.h 1 d.w %}</td>
                        <td class="text-right">{{ d.x }}</td>
                        <td class="text-right">{{ d.y }}</td>
                        <td class="text-right">{{ d.w }}</td>
                        <td class="text-right">{{ d.h }}</td>
                        {% if not object.dataset %}<td class="text-right"><a href="/segments/by_index/{{ object.pk }}/{{ d.segment_index }}">{{ d.segment_index }}</a></td>{% endif %}
                        <td class="text-right">{{ d.frame_index }} </td>
                        <td class="text-center"><a href="/frames/{{ d.frame_id }}">view</a></td>
                    </tr>
                {% endfor %}
                </tbody>
                </table>
                </div>
            </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-6">
        <div class="box box-primary">
        <div class="box-body with-border">
            <h4>Assign label to entire video</h4>
            <form role="form"  method="post" action="/assign_video_labels" >
                    <div class="form-group">
                        <input id="labels" style="margin:10px auto" name="labels" class="form-control" type="text-area" rows="3" width="80%" required="" placeholder="provide a single label name, or a comma separated list">
                    </div>
                        <input name="video_pk" class="form-control" type="hidden" value="{{ object.pk }}">
                    <div class="form-group">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-primary pull-right">submit</button>
                    </div>
            </form>
        </div>
        </div>
    </div>
    <div class="col-lg-6">
            <div class="box">
            <div class="box-body">
                <h3>Metadata</h3>
                <textarea style="width:100%;height:300px;">
                    {{ object.metadata }}
                </textarea>
            </div>
        </div>
    </div>
</div>
</section>
{% endblock %}
{% block page_js%}
<script>
    $(document).ready(function() {
        InitializeTables();
    })
</script>
{% endblock %}
